<template>
    <div class="flex flex-wrap gap-4">
    <el-card style="width: 50%" shadow="always">
      <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="标题" prop="title">
      <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <el-input
        v-model="ruleForm.content"
        type="text"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-switch v-model="ruleForm.status" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
    </el-form-item>
  </el-form>
      
    </el-card>
  </div>

 </template>
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
//@ts-ignore
import { addItem } from '@/api/list'

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  title: '',
  content: '',
  status: false
})

const rules = reactive<FormRules<typeof ruleForm>>({
  title: [{ trigger: 'blur', message: '请输入标题' }],
  content: [{ trigger: 'blur', message: '请输入内容' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
     addItem(ruleForm.title,ruleForm.content,ruleForm.status).then((r) => {
      console.log(r)
    })
    } else {
      console.log('error submit!')
    }
  })
}
 </script>
 <style lang="">
   
 </style>